<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getUserFB,SUserFB,deteleUserFB } from "../api/api";
const input = ref('')
const tableData = ref()
onMounted(()=>{
    userFB()
})
//获取数据
const userFB = async() => {
    const res = await getUserFB()  
    tableData.value = res.data.data
}
//搜索数据
const Suserfb = async() => {
    const res = await SUserFB({data:input.value})  
    tableData.value = res.data.data
}
//删除数据
const deleteRow = async(e:string) => {
    const res = await deteleUserFB({_id:e})
    tableData.value = res.data.data
}
</script>

<template>
    <el-scrollbar>
        <div class="inputBtn">
            <el-input v-model="input" placeholder="请输入内容" />
            <el-button @click="Suserfb">搜索</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column prop="_id" label="id" width="300" />
            <el-table-column prop="date" label="发布时间" width="140" />
            <el-table-column prop="userName" label="用户名字" width="120" />
            <el-table-column prop="money" label="发布金额" width="120" />
            <el-table-column prop="title" label="发布标题" width="700" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger" size="small" @click.prevent="deleteRow(scope.row._id)">
                        删除此数据
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>
</template>

<style scoped>
.inputBtn{
    width: 25%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
}
</style>
